<template>
  <div class="shopcart-page">
    <z-header>购物车</z-header>

    <shopcar-cells
      :cartList="cartList"
      @delcartitem="handDelCartItem"
      @changeCount="handChangeCount"
    ></shopcar-cells>
    <!-- 子组件 加减 事件 handChangeCount 父组件发对应请求 -->
    <van-divider>可能你还想要</van-divider>

    <recommend></recommend>

    <van-submit-bar
      :price="$store.getters.getCountPrice * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox
        @click="handAllChecked"
        :value="allChecked"
        checked-color="#F63515"
        >全选</van-checkbox
      >
    </van-submit-bar>
    <tab-bar></tab-bar>
  </div>
</template>

<script>
import TabBar from "@/components/tabBar.vue";
import zHeader from "@/components/common/z-header.vue";
import ShopcarCells from "./comtonents/shopcarCells.vue";
import Recommend from "../../components/recommend.vue";
import { mapState } from "vuex";
import { deleteCartItem, cartAdd } from "@/api/api.js";

// import {mapState}
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState(["cartList", "allChecked"]),
  },
  components: {
    TabBar,
    zHeader,
    ShopcarCells,
    Recommend,
  },
  created() {
    this.cartData();
  },
  methods: {
    cartData() {
      this.$store.dispatch("getCartData");
    },
    onSubmit() {
      console.log("onSubmit");
    },
    // 全选或取消全选 点击事件
    handAllChecked() {
      this.$store.dispatch("changeAllChecked");
    },
    // 子组件 删除 数据 触发的方法
    handDelCartItem(item) {
      deleteCartItem({ id: item.id }, (res) => {
        if (res.status === 0) {
          this.cartData();
        }
      });
    },
    // 购物车数据 步进器 点击了 加号减号 并更新的事件
    handChangeCount(params) {
      // console.log(params);
      cartAdd(params, (res) => {
        console.log(res);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.shopcart-page {
  background-color: #f7f7f7;

  .van-submit-bar {
    bottom: 120px;
    background-color: #f7f7f7;
  }

  .van-divider {
    background: #fff;
    padding: 28px 14px;
  }
}
</style>